import appRoutes, { AppRoutes } from '@/config/routes/modules/app';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import './Header.css';
import Time from './Time';
import { routerQuery } from '@/config/routes'


const Header: React.FC = () => {
  // 导航菜单
  const menu = appRoutes[0].children ?? [];

  const navigate = useNavigate();
  const location = useLocation();

  const [active, setActive] = useState('');

  useEffect(() => {
    const route = routerQuery(location.pathname)
    setActive(route ? route.id : '');
  }, [location])

  const navChange = (i: AppRoutes) => {
    i.path && navigate(i.path);
  };

  return (
    <>
      <div className="header">
        {/* Logo and title */}
        <div className="header_info">
          {/* <img src={logo} alt="logo" /> */}
          {import.meta.env.VITE_APP_TITLE}
        </div>
        {/* Top Navigation */}
        <div className="header_nav">
          <div className="flex-align-center">
            {menu.map((i) => (
              <div key={i.id} className={clsx('nav_item', 'cp', { nav_item_active: i.id === active })} onClick={() => navChange(i)}>
                {i.title}
              </div>
            ))}
          </div>
          <div className={clsx('nav_item_slide', `nav_item_slide-${active}`)}></div>
        </div>
        {/* Right time */}
        <Time></Time>
      </div>
      {/* <div style={{ height: 50, opacity: 0 }}></div> */}
    </>
  );
};

export default Header;
